<template>
  <div>
    <div class="head">
      <div>
        <div class="count">{{ res.serviceNum }}次</div>
        <div class="name">服务商发起活动次数</div>
      </div>
      <div>
        <div class="count">{{ res.storeNum }}次</div>
        <div class="name">门店预约成功次数</div>
      </div>
      <div>
        <div class="count">{{ res.successNum }}次</div>
        <div class="name">成功举办次数</div>
      </div>
      <div>
        <div class="count">{{ res.jionNum }}次</div>
        <div class="name">参加活动人数</div>
      </div>
      <div>
        <div class="count">{{ res.signNum }}人</div>
        <div class="name">签到人数</div>
      </div>
    </div>
    <!--  <div class="tabs">
          <div>门店</div>
          <div class="tabac">服务商</div>
    </div>-->
    <div class="tabs-data">
      <el-tabs v-model="tabs" 
      
      >
        <el-tab-pane label="门店" name="store">
          <el-table :data="storeList" stripe style="width: 100%">
            <el-table-column prop="serviceName" width="400" align="center" label="门店名称"></el-table-column>
            <el-table-column prop="serviceNum" label="活动次数" align="center"></el-table-column>
            <el-table-column prop="storeNum" label="预约成功次数" align="center"></el-table-column>
            <el-table-column prop="successNum" label="成功举办次数" align="center"></el-table-column>
            <el-table-column prop="jionNum" label="参与总人数" align="center"></el-table-column>
            <el-table-column prop="signNum" label="签到人数" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="服务商" name="service">
          <el-table :data="serviceList" stripe style="width: 100%">
            <el-table-column prop="serviceName" width="400" align="center" label="服务商名称"></el-table-column>
            <el-table-column prop="serviceNum" label="活动次数" align="center"></el-table-column>
            <el-table-column prop="storeNum" label="预约成功次数" align="center"></el-table-column>
            <el-table-column prop="successNum" label="成功举办次数" align="center"></el-table-column>
            <el-table-column prop="jionNum" label="参与总人数" align="center"></el-table-column>
            <el-table-column prop="signNum" label="签到人数" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div class="clear"></div>
      <div>
        <el-pagination
          class="pages"
          background
          layout="prev, pager, next"
          :page-count="total"
          @current-change="changePage"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  created() {
    let _this = this;

    // 获取统计数据
    axios
      .post(`${this.$store.state.url}/tActivity/selectActivityNum`)
      .then(response => {
        let res = response.data;
        if (res.code == 0) {
          _this.res = res.data;
        }
      });

    this.getStoreList();
  },
  data() {
    return {
      loading: false,
      total: 0,
      tabs: "store", // 标签页
      page: {
        page: 1,
        limit: 10
      },
      storeList: [],
      serviceList: [],
      res: {
        jionNum: 0,
        serviceNum: 0,
        signNum: 0,
        storeNum: 0,
        successNum: 0
      }
    };
  },
  methods: {
    //. 获取门店活动概况列表
    getStoreList() {
      this.loading = true;
      axios
        .post(
          `${this.$store.state.url}/tActivity/selectNumByStore`,
          qs.stringify(this.page)
        )
        .then(response => {
          let res = response.data;
          this.storeList = res.data;
          this.total = Math.ceil(res.count / 10);
          this.loading = false;
        });
    },
    // 获取服务商活动概况列表
    getServiceList() {
      this.loading = true;
      axios
        .post(
          `${this.$store.state.url}/tActivity/selectNumByService`,
          qs.stringify(this.page)
        )
        .then(response => {
          let res = response.data;
          this.serviceList = res.data;
          this.total = Math.ceil(res.count / 10);
          this.loading = false;
        });
    },
    // 切换分页
    changePage(argv) {
      console.log(argv);
      this.page.page = argv;
      if (this.tabs == "store") {
        this.getStoreList();
      } else {
        this.getServiceList();
      }
    }
  },
  watch: {
    tabs(val) {
      this.page.page = 1;
      if (val == "store") {
        this.getStoreList();
      } else {
        this.getServiceList();
      }
    }
  }
};
</script>
<style scoped>
.clear {
  clear: both;
}
.head {
  margin: 20px 0;
}
.head > div {
  width: 140px;
  padding-right: 65px;
  height: 98px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  display: inline-block;
}
.head :first-child {
  margin: 0;
}
.name {
  font-size: 14px;
  color: #252631;
  height: 24px;
  text-align: center;
}
.count {
  height: 50px;
  font-size: 22px;
  color: #4b74ff;
  text-align: center;
  line-height: 50px;
  margin-top: 15px;
}
.tabs {
  margin-top: 38px;
  width: 398px;
  height: 67px;
  display: flex;
  font-size: 20px;
}
.tabs > div {
  flex: 1;
  font-size: 20px;
  height: 67px;
  line-height: 67px;
  text-align: center;
  font-weight: bold;
}
.tabs:first-child {
  border-right: 1px solid #ddd;
}
.tabs .tabac {
  background: #e0eefe;
}
.tabs-data {
  padding: 10px;
  background-color: #fff;
}
.pages {

  padding: 20px 0;
  width: 100%;
  text-align: center;
}
</style>
